<script>
    $("#current_x").val($("#MXRes").val());
    $("#current_y").val($("#MYRes").val());
    $('#change_x, #change_y').on("change keyup keypress",function(){
        var xres = parseFloat($("#MXRes").val())-parseFloat($("#MXRes").val())*parseFloat($("#change_x").val()/100);
        var yres = parseFloat($("#MYRes").val())-parseFloat($("#MYRes").val())*parseFloat($("#change_y").val()/100);
        $("#res_x").val(xres);
        $("#res_y").val(yres);
    });
</script>
<div class="edit-page">
    <table>
        <tr>
            <th></th>
            <th>X Resolution<br><br></th>
            <th>Y Resolution<br><br></th>
        </tr>
        <tr>
            <td><br>Current Resolution &nbsp; <br><br></td>
            <td><input id="current_x" type="number" class="form-control" value=""></td>
            <td><input id="current_y" type="number" class="form-control" value=""></td>
        </tr>
        <tr>
            <td><br>Change Percentage<br><br></td>
            <td><input id="change_x" type="number" class="form-control" value=""></td>
            <td><input id="change_y" type="number" class="form-control" value=""></td>
        </tr>
        <tr>
            <td><br>Result Resolution<br><br></td>
            <td><input id="res_x" type="number" class="form-control" value=""></td>
            <td><input id="res_y" type="number" class="form-control" value=""></td>
        </tr>
    </table>
    <br>
    <br>
	<input type="button" value="Save" class="btn-success" data-dismiss="modal" onclick='$("#XYRes").val($("#res_x").val());$("#YRes").val($("#res_y").val());'>
    <br>
    <div class="alert alert-info"><span class="glyphicon glyphicon-exclamation-sign"></span>
		Positive percentage means larger and negative smaller
	</div>
</div>